"""
@author: Gaoyaoxia
@date: 2021-03-02 17:13:24
"""
<!-- 委员详情 -->
<template>
  <div class="box-content">
    <div class="return-btn" @click="$router.back()">返回</div>
    <div class="basic-box">
      <div class="box-left">
        <section-title>基本信息</section-title>
        <div class="form-item">
          <div class="img-avatar">
            <img />
          </div>
          <div class="info">
            <a-row>
              <a-col :span="8"><span>姓名：</span>{{ records.name }}</a-col>
              <a-col :span="8"
                ><span>用户名：</span>{{ records.username }}</a-col
              >
              <a-col :span="8"><span>手机号：</span>{{ records.phone }}</a-col>
              <a-col :span="8"><span>性别：</span>{{ records.sex }}</a-col>
              <a-col :span="8"
                ><span>出生年月：</span>{{ records.birthday }}</a-col
              >
              <a-col :span="8"><span>民族：</span>{{ records.nation }}</a-col>
              <a-col :span="8"><span>籍贯：</span>{{ records.strJG }}</a-col>
              <a-col :span="8"
                ><span>界别：</span>{{ records.strSector }}</a-col
              >
              <a-col :span="8"
                ><span>党派：</span>{{ records.strFaction }}</a-col
              >
            </a-row>
          </div>
        </div>
        <section-title>学历情况</section-title>
        <div class="form-item">
          <div class="info">
            <a-row>
              <a-col :span="12"><span>毕业院校：</span></a-col>
              <a-col :span="12"><span>专业：</span></a-col>
              <a-col :span="12"><span>学位：</span></a-col>
              <a-col :span="12"><span>学历：</span></a-col>
            </a-row>
          </div>
        </div>
        <section-title>工作情况</section-title>
        <div class="form-item">
          <div class="info">
            <a-row>
              <a-col :span="8"><span>工作时间：</span></a-col>
              <a-col :span="8"><span>职业标签：</span></a-col>
              <a-col :span="8"><span>职称：</span></a-col>
              <a-col :span="24"><span>工作单位及职务：</span>商信政通</a-col>
            </a-row>
          </div>
        </div>
        <section-title>联系方式</section-title>
        <div class="form-item">
          <div class="info">
            <a-row>
              <a-col :span="8"><span>办公电话：</span></a-col>
              <a-col :span="8"><span>邮编：</span></a-col>
              <a-col :span="8"><span>传真：</span></a-col>
              <a-col :span="8"><span>是否邮寄：</span>是</a-col>
              <a-col :span="8"><span>电子邮箱：</span></a-col>
              <a-col :span="24"
                ><span>通讯地址：</span>安徽省合肥市蜀山区</a-col
              >
            </a-row>
          </div>
        </div>
      </div>
      <div class="box-right">
        <section-title>任期内情况</section-title>
        <div class="form-item">
          <div class="info">
            <div class="right-select" v-if="isMore">
              所属届次：
              <s-select
                v-model="strId"
                :selectOption="strIds"
                @change="handleChange"
                style="width: 350px"
              ></s-select>
            </div>
             <a-row v-else>
              <a-col :span="24"><span>所属届次：</span>十四届四次</a-col>
             </a-row>
            <a-row>
              <a-col :span="12"><span>届中状态：</span>正常</a-col>
              <a-col :span="12"><span>出席类型：</span>--</a-col>
              <a-col :span="12"><span>届内机构：</span>联络委</a-col>
              <a-col :span="12"><span>所属编组：</span></a-col>
              <a-col :span="12"><span>常委会组成人员：</span>是</a-col>
              <a-col :span="12"><span>是否连任：</span>是</a-col>
              <a-col :span="12"><span>委员证号：</span></a-col>
              <a-col :span="12"><span>推荐单位：</span></a-col>
              <a-col :span="24"><span>届内职务：</span></a-col>
              <a-col :span="24"><span>所属区域：</span></a-col>
              <a-col :span="24"><span>个人简历：</span></a-col>
            </a-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sectionTitle from 'components/base/sectionTitle'
export default {
  components: { sectionTitle },
  data() {
    return {
      isMore: true,
      id: '',
      records: {},
      strIds: [],
      strId: '十四届四次'
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.id = this.$route.query.id
    console.log('记录：', this.id)
    //根据id请求详情接口
    this.records = {
      name: '程翔',
      username: 'chengxiang',
      phone: '18940836520',
      sex: '男',
      birthday: '2000-10-01',
      nation: '汉族',
      strJG: '皖',
      strSector: '少数民族',
      strFaction: '中共'
    }
  },
  methods: {
    //handleChange任期内情况届次change回调
    handleChange(key) {
      console.log('key:', key)
    }
  },
  created() {}
}
</script>
<style lang='less' scoped>
.box-content {
  padding: 15px;
}
.return-btn {
  width: 75px;
  height: 40px;
  line-height: 36px;
  color: #666;
  background: url('../../../../assets/images/member/return_but_bg.png') no-repeat;
  position: fixed;
  right: 15px;
  top: 100px;
  text-align: center;
  text-indent: 18px;
  font-size: 14px;
  cursor: pointer;
  z-index: 1;
  &:hover{
    color:#097bc7;
    background: url('../../../../assets/images/member/return_but_bg_hov.png') no-repeat;
  }
}
.box-right {
  /deep/.section-title {
    border: 0;
    margin-bottom: 5px;
    /deep/.tab-name {
      border-bottom: 0;
    }
  }
}
.form-item {
  width: 100%;
  margin-bottom: 16px;
  color: #333;
  display: flex;
  .img-avatar {
    display: inline-block;
    border: none;
    img {
      width: 100px;
      height: 110px;
      background: #f2f5f8;
    }
    padding: 15px 10px;
  }
  /deep/.ant-col {
    padding: 15px 10px;
  }
  .info {
    width: 100%;
    span {
      display: inline-block;
      height: 100%;
      color: #919191;
    }
    /deep/.ant-select {
      height: 40px;
      line-height: 40px;
    }
    /deep/.ant-select-selection {
      height: 40px;
      border-radius: 4px;
      /deep/.ant-select-selection__rendered {
        line-height: 40px;
        font-size: 16px;
      }
    }
    .right-select {
      line-height: 50px;
      padding: 5px 10px;
    }
  }
}
</style>